<!DOCTYPE html>
<html lang="en">
<head>
    <title>摇一摇</title>
    <meta charset="UTF-8">
    <!--<meta http-equiv="pragma" content="no-store">-->
    <!--<meta http-equiv="Cache-Control" content="no-cache,no-store">-->
    <!--<meta http-equiv="expires" content="0">-->
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B07d1f85bb37b3a70760806e76a9887c"></script>
    <link rel="stylesheet" href="/old/css/modal-px.scss" media="screen" title="no_title" charset="utf-8">
    <link rel="stylesheet" href="/old/css/shaking/home.scss?__inline" media="screen" title="no_title" charset="utf-8">
    <!--<link rel="prefetch" href="/js/shaking.mp3" />-->
</head>
<body>
<div id="main">
    <header>
        <h3>摇一摇测试226</h3>
        <div class="rule-bar">
            <div class="rule-btn">活动规则</div>
            <div class="rule-modal">
                <div class="rule-content">
                    <h4>活动时间：</h4>
                    <p id="date">2017-09-26 15:20:33  至2017-09-30 15:20:36</p>
                    <h4>活动说明：</h4>
                    <p id="desc"><p>摇一摇测试2</p></p>
                </div>
            </div>
        </div>
    </header>
    <section>
        <img src="/old/images/shaking/shaking-background.jpg"/>
        <div class="shake-center hand-animate">
            <img src="/old/images/shaking/shaking-center.png"/>
        </div>
    </section>
    <footer>
        <h4>奖项说明：</h4>
        <div class="prize-desc">摇一摇测试2的奖品描述1<br>摇一摇测试2的奖品描述2</div>
        <a class="blue_a" href="">查看中奖纪录</a>
    </footer>
    <div style="text-align:center;width:100%;font-size: 12px;background-color:#fff;height:30px;line-height:30px;">所有活动及奖品与苹果公司无关。</div>
    <div style="display:none;width:0;height:0;" id="container"></div>
</div>
<!--<div class="success-modal model">-->
    <!--<div class="modal-content">-->
        <!--<div class="header">-->
            <!--<img src="/images/shaking/success-modal-top.png" alt="" />-->
            <!--<div class="close"><img src="/images/shaking/success-modal-close.png"/></div>-->
        <!--</div>-->
        <!--<div class="content">-->
            <!--<h2 class="tips">恭喜您获得了“摇一摇”游戏 <span class="prize">一等奖（iPhone6一台）</span></h2>-->
            <!--<div class="ops">-->
                <!--<img class="prizeIcon" src="/images/shaking/prize-icon.jpg" alt=""/>-->
                <!--<div class="btns">-->
                    <!--<a class="fetch">去领取</a>-->
                    <!--<span class="once-more">再玩一次</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<!--<div class="login-modal model">-->
    <!--<div class="modal-content">-->
        <!--<img src="/images/shaking/login-back.png" alt=""/>-->
        <!--<div class="close">-->
            <!--<img src="/images/shaking/success-modal-close.png"/>-->
        <!--</div>-->
        <!--<input type="text" placeholder="请输入姓名" name="realName">-->
        <!--<span class="begin-btn">开始抽奖</span>-->
    <!--</div>-->
<!--</div>-->
<!--<div class="fail-modal model">-->
    <!--<div class="modal-content">-->
        <!--<div class="header">-->
            <!--<img src="/images/shaking/fail-modal-top.png" alt="" />-->
            <!--<div class="close"><img src="/images/shaking/success-modal-close.png"/></div>-->
        <!--</div>-->
        <!--<div class="content">-->
            <!--<h2 class="tips">对不起，您没中奖！</h2>-->
            <!--<h2 class="tips">您还有<span class="prize">2</span>次机会</h2>-->
            <!--<span class="once-more">再玩一次</span>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<!--<audio src="/common/js/shaking.mp3" id="playMiu" controls="controls">-->
    <!--浏览器不支持-->
<!--</audio>-->
<div class="hidden">
    <!--<audio src="/js/shaking.mp3" id="playMiu">-->
        <!--浏览器不支持-->
    <!--</audio>-->
</div>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 针对uc横竖屏rem html没有重绘的问题
                var style;
                if (style = document.getElementById("forhtml")) {
                    style.parentNode.removeChild(style);
                }
                style = document.createElement("style");
                style.id = "forhtml";
                document.head.appendChild(style);
                style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
            };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
</script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/zepto.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/zepto-adapter.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/zepto.base.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/modal.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/utils.js"></script>
<script type="text/javascript" charset="utf-8" src="/old/common/js/GeoUtils.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
       document.getElementById('playMiu').pause();
        var allowed = {};
//        //是否有机会
//        function requestAllowed(callback){
//            $.ajax({
//                type: 'GET',
//                url: '/lua/api/draw/allowed',
//                dataType: 'json',
//                contentType: "application/json; charset=utf-8",
//                data: {
//                    act_id: window.parameter['act_id'],
//                    uid:  window.parameter['uid']
//                },
//                async: false,
//                success: function (data) {
//                    if (data.code == 200) {
//                        callback(data.data);
//                    } else {
//                        $.alert(data.message);
//                    }
//                }
//            });
//        }
//        requestAllowed(function(data){
//            allowed = data.data;
//            if(data.data.type=='paused'||data.data.type=='act-end'||data.data.type=='act-not-start'||data.data.type=='not-found'){
//                $.alert(typeObject[data.data.type]);
//            }else{
//                $('body').show();
//            }
//        });
//        //请求活动信息
//        var act_info = '';
//        function requestActInfo(callback){
//            $.ajax({
//                type: 'GET',
//                url: '/lua/api/draw/summary',
//                dataType: 'json',
//                contentType: "application/json; charset=utf-8",
//                data: {act_id:window.parameter['act_id'],type:'shaking'},
//                async: false,
//                success: function (data) {
//                    if (data.code == 200) {
//                        callback(data.data);
//                        act_info = data.data;
//                    } else {
//                        $.alert(data.message);
//                    }
//                }
//            });
//        }
//        requestActInfo(function(data){
//            $('#act-title').html(data.data.name);
//            $('#act-desc').html(data.data.description);
//            $('body').css({
//                'background': 'url('+data.data.background_img+') no-repeat center top',
//                'background-size': '100% auto',
//            });
//        });
//
//        $('.rule-btn').on('click',function(e){
//            $('.rule-modal').toggleClass('show');
//        });

        //摇一摇事件监听
        var SHAKE_THRESHOLD = 1250;
        var last_update = 0;
        var x = y = z = last_x = last_y = last_z = 0;
        var shake_start = false;
        var flag = false;
        var number = 0;
        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        } else {
            alert('本设备不支持摇一摇');
        }
        function deviceMotionHandler(eventData){
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            if ((curTime - last_update) > 100) {
                var diffTime = curTime - last_update;
                last_update = curTime;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
                if (speed > SHAKE_THRESHOLD) {
                    $("#playMiu").get(0).play();
                    if(number > 2){
                        if(shake_start){
                            lottery();
                        }
                    }
                    number = number + 1;
                }
                last_x = x;
                last_y = y;
                last_z = z;
            }
        }

//        var isInCircle = false;
//        function isPointInCircle(point){
//            var act_point = new BMap.Point(act_info.rules.longitude,act_info.rules.latitude);
//            var circle = new BMap.Circle(act_point,act_info.rules.range,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
//            return BMapLib.GeoUtils.isPointInCircle(point,circle);
//        }
//
//        //百度地图定位
//        if(navigator.geolocation) {
//            // 百度地图API功能
//            var map = new BMap.Map("container");
//            var point = new BMap.Point(116.331398,39.897445);
//            map.centerAndZoom(point,12);
//            var geolocation = new BMap.Geolocation();
//            geolocation.getCurrentPosition(function(r){
//                if(this.getStatus() == BMAP_STATUS_SUCCESS){
//                    var mk = new BMap.Marker(r.point);
//                    map.addOverlay(mk);
//                    map.panTo(r.point);
//                    if(act_info.rules.is_spot){
//                        isInCircle = isPointInCircle( r.point)
//                    }
//                }
//                else {
//                    alert('failed'+this.getStatus());
//                }
//            },{enableHighAccuracy: true});
//        }
        function lottery() {
            if(isSignPass == -2){
                $.toast('请下载APP参与投票');
                return;
            }
            if(isSignPass == -1) {
                window.location.href = window.location.origin + window.location.pathname + window.location.search + '&noLogin=true';
                return;
            }
            if(isSignPass == 0){
                $.toast('非法请求，请在App中打开');
                return;
            }
            if(!allowed.allowed){
                $.alert(typeObject[data.data.type]);
                return;
            }

            if(!(act_info.rule.is_spot&&isInCircle)){
                $.alert('不在范围内哦~~');
                return;
            }

            $.ajax({
                type: 'GET',
                url: '/lua/api/draw/random',
                data: {
                    act_id: window.parameter['act_id'],
                    uid: window.parameter['uid'],
                    type: 'shaking'
                },
                dataType: 'json',
                success: function(data){
                    if (data.code == 200) {

                    } else {
                        $.alert(data.message);
                    }
                },
                error: function(data){
                    alert(data.message);
                }
            });
        }
    });
</script>
</body>
</html>